<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="js/template-web.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>文章</title>
</head>

<body>

<div id="article_content"></div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="addArticle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="articleTitle">添加文章</h4>
            </div>
            <div class="modal-body">
                <div class="input-group" style="display: none;">
                    <span class="input_tip">*id</span>
                    <input id="id" class="form-control" placeholder="请输入用户名"/>
                </div>
                <div class="input-group">
                    <span class="input_tip">*标题</span>
                    <input id="title" class="form-control" placeholder="请输入标题"/>
                </div>
                <div class="input-group">
                    <span class="input_tip">*链接</span>
                    <input id="link" class="form-control" placeholder="请输入链接"/>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="addorEditArticle()">提交</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script>
    var articleId;
    var url = "http://localhost:8090/SpringMvc/article/getArticle";
    console.log(articleId)
    console.log(url)
    $.get(url, function (data) {
        if (data.code == 1) {
            var html = template('article', data.data);
            document.getElementById('article_content').innerHTML = html;
        } else {
            alert(data.msg)
        }
    });

    //添加文章弹窗
    function showAddArticleDialog() {
        $('#id').val('');
        $('#title').val('');
        $('#link').val('');

        $('#articleTitle').html("添加文章");
        $('#addArticle').modal('show');

    }

    //添加/修改文章
    function addorEditArticle() {
        debugger
        var title = $('#title').val();
        var link = $('#link').val();
        if (title.length <= 0) {
            alert("标题不能为空")
            return;
        }
        if (link.length <= 0) {
            alert("链接不能为空")
            return;
        }
        var title = $('#articleTitle').html();
        if (title.indexOf("修改") != -1) {
            var aid = $('#id').val();
            console.log('#aid#' + aid)
            var url = "http://localhost:8090/SpringMvc/article/updateArticle?title=" +
                title + "&link=" + link + "&id=" + aid;
            $.get(url, function (data) {
                if (data.code == 1) {
                    $('#addArticle').modal('hide');
                    //刷新界面
                    window.location.reload();
                } else {
                    alert(data.msg);
                }
            });

        } else {
            var url = "http://localhost:8090/SpringMvc/article/addArticle?title=" +
                title + "&link=" + link;
            $.get(url, function (data) {
                if (data.code == 1) {
                    $('#addArticle').modal('hide');
                    //刷新界面
                    window.location.reload();
                } else {
                    alert(data.msg);
                }
            });
        }

    }

    function showDeleteArttcleDialog(id) {
        articleId = id;
        $('#deleteUser').modal('show');
    }
</script>

<script id="article" type="text/html">

    <table class="table table-bordered">
        <caption>

        </caption>
        <thead>
        <tr>
            <th>序号</th>
            <th>标题</th>
            <th>链接</th>
            <th>阅读数</th>
            <th>评论数</th>
            <th>收藏数</th>
            <th>创建时间</th>
            <th>
                <button class="btn btn-primary pull-right" data-toggle="modal" onclick="showAddArticleDialog()">添加
                </button>
            </th>
        </tr>
        </thead>
        <tbody>

        {{each $data}}
        <tr>
            <td>{{$index}}</td>
            <td>{{$value.title}}</td>
            <td>{{$value.link}}</td>
            <td>{{$value.readCount}}</td>
            <td>{{$value.commitCount}}</td>
            <td>{{$value.favoriteCount}}</td>
            <td>{{$value.createTime}}</td>
            <td>
                <button type="button" class="btn btn-default" onclick="showEditArticleDialog({{$value.id}})">编辑</button>
                <button type="button" class="btn btn-default" onclick="showDeleteArttcleDialog({{$value.id}})">删除
                </button>
            </td>
        </tr>
        {{/each}}

        </tbody>
    </table>
</script>
<script type="text/javascript" src="js/tool.js"></script>
</body>

</html>